<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./1.css">
</head>
<body>
    <div class="zong">
        <button>撒旦111或222</button>
        <div class="zuo">
            <img src="./1.jpg" alt="">
            <div class="mask"></div>
        </div>
        <div class="xiao">
            <ul>
                <li><img src="./1.jpg" alt="" ></li>
                <li><img src="./2.jpg" alt=""></li>
                <li><img src="./3.jpg" alt=""></li>
                <li><img src="./4.jpg" alt=""></li>
                <li><img src="./5.jpg" alt=""></li>
            </ul>
        </div>
        <div class="yuo"></div>
    </div>
</body>
</html>
<script>
    var zimg=document.querySelector('.zuo img')
    var ximg=document.querySelectorAll('.xiao img')
    var yuo=document.querySelector('.yuo')
    var mask=document.querySelector('.mask')

    for(var i=0;i<ximg.length;i++){
        ximg[i].onmouseenter=function(){
            this.style.border='2px solid red'
            zimg.src=this.src
        }
        ximg[i].onmouseleave=function(){
            this.style.border='2px solid  transparent'
            
        }
    }

    zimg.onmouseenter=function(){
        yuo.style.display='block'
        yuo.style.backgroundImage=`url(${this.src})`
    }
    zimg.onmouseleave=function(){
        yuo.style.display='none'
        mask.style.display='none'
    }

    zimg.onmousemove=function(e){
        mask.style.display='block'
        var x=(e.pageX-100)<0?0:(e.pageX-100)
        var y=(e.pageY-100)<0?0:(e.pageY-100)
        x=x>200?200:x
        y=y>200?200:y
        mask.style.top=y+'px'
        mask.style.left=x+'px'
        yuo.style.backgroundPosition=`${-2*x}px ${-2*y}px`
    }
</script>